// 在main.js上通过import引入Vue库和自己写的Vue组件库
import Vue from 'vue'
import index from './components/index.vue'
import eventBus from './util/eventBus'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

/**
 * Vue实例在setHtml方法中声明，初始化执行init的时候就能够创建
 * 声明Vue实例对象时，在其挂载完毕的生命周期里声明一个订阅，用于订阅update方法中发布的消息，从而更新实例数据
 * update方法中，发布一个消息，让Vue实例接收消息，更新数据
 * 在Vue实例的destroyed中，结束订阅
 * 注意loadFile中index.css的引入路径，因为webpack打包后将其放在了css文件夹里，所以路径是./css/index.css
 */
(function (KDApi) {
  function MyComponent(model) {
    this._setModel(model)
  }

  MyComponent.prototype = {
    _setModel: function (model) {
      this.model = model
    },
    init: function (props) {
      console.log('-----init data', props)
      setHtml(this.model, props)
    },
    update: function (props) {
      console.log('-----update data', props)
      eventBus.pub(this.model, 'update', props)
    },
    destoryed: function () {
      // console.log('-----destoryed', this.model)
    }
  }

  const setHtml = (model, props) => {

    let initData = props.data || []
    let financialStandards = []
    let allBase64List = []
    let identifyData = {}
    let subTableAllData = {}
    
    KDApi.loadFile('./css/index.css', model, () => {
      const { invoke, dom } = model
      const themeColor = props.themeNum
      Vue.use(ElementUI)
      new Vue({
        el: dom,
        template: `<index
          :model="model"
          :invoke="invoke"
          :initData="initData"
          :themeColor="themeColor"
          :getLangMsg="getLangMsg"
          :identifyData="identifyData"
          :allBase64List="allBase64List"
          :subTableAllData="subTableAllData"
          :financialStandards="financialStandards"
          :apiCallBackStatusArr="apiCallBackStatusArr"
          />`,
        components: {
          index
        },
        data: {
          model,
          initData,
          themeColor,
          identifyData,
          allBase64List,
          subTableAllData,
          financialStandards,
          apiCallBackStatusArr: [],
        },
        mounted() {
          this.updateSub = eventBus.sub(model, 'update', (props) => {
            let data = props.data
            //组件内监听apiCallBackStatusArr可以找到回调
            if (data && data.eventName) {
              let flag = true;
              this.apiCallBackStatusArr.forEach((item, index)=> {
                if(item.eventName === data.eventName) {
                  this.apiCallBackStatusArr[index] = data;
                  flag = false
                }
              })
              if(flag) this.apiCallBackStatusArr.push(data)
            }

            // 获取可用的财务准则列表
            if (data && data.eventName && data.eventName === 'finance_event_standard_list') {
              this.financialStandards = data.data
            }

            // 页面搜索
            if (data && data.eventName && data.eventName === 'finance_event_search') {
              this.initData = data.data
            }

            // 展开行
            if (data && data.eventName && data.eventName === 'finance_event_task_byid') {
              this.subTableAllData = data.data
            }

            // 编辑获取识别数据
            if (data && data.eventName && data.eventName === 'finance_event_task_edit') {
              this.identifyData = data.data
            }

            // 上传文件后获取识别数据
            if (data && data.eventName && data.eventName === 'finance_event_task_ocr') {
              if (data.data.status) {
                this.identifyData = data.data
              }
            }

            // 获取pdf转的图片list
            if (data && data.eventName && data.eventName === 'finance_event_pdf_image') {
              let list = []
              data.data.forEach(item => {
                list.push('data:image/*;base64,' + item)
              })
              this.allBase64List = list
            }

            // 上传文件后获取识别数据
            if (data && data.eventName && data.eventName === 'finance_event_task_save') {
              if (data.data === 200) {
                this.identifyData = {}
              }
            }

          })
        },
        destroyed() {
          eventBus.unsub(this.updateSub)
        },
        methods: {
          invoke: (eventName, args) => {
            console.log(eventName, args)
            invoke(eventName, args)
          },
          getLangMsg: (key) => {
            return KDApi.getLangMsg(model, key)
          }
        }
      })
    })
  }

  // 注册自定义组件
  KDApi.register('imdtextin', MyComponent, {
    isMulLang: true
  })
})(window.KDApi)
